<template>
  <div>
    <el-table :data="tableData" border highlight-current-row stripe style="width: 100%;margin-top: 20px">
      <el-table-column label="日期" prop="date"></el-table-column>
      <el-table-column label="用户帐户余额" prop="totalWalletMoney"></el-table-column>
      <el-table-column label="用户帐户抵用券金额" prop="totalVoucher"></el-table-column>
      <el-table-column label="微信收入" prop="wxPay"></el-table-column>
      <el-table-column label="提现金额" prop="cashMoney"></el-table-column>
      <el-table-column label="待提现金额" prop="waitCash"></el-table-column>
      <el-table-column label="订单交易">
        <template slot-scope="scope">
          <p>商品金额: {{scope.row.tradeMoney}}(微信付款{{scope.row.wxPayTrade}})</p>
          <p>运费金额: {{scope.row.tradePostfee}}(微信付款{{scope.row.wxPayPostfee}})</p>
          <el-button type="text" @click="queryTradeReport(scope.row.date)">详情</el-button>
        </template>
      </el-table-column>
      <el-table-column label="购买vip奖励用户的金额" >
        <template slot-scope="scope">
          <p>{{scope.row.vipTotalBonus}}</p>
          <el-button type="text" @click="queryVipReport(scope.row.date)">详情</el-button>
        </template>
      </el-table-column>
      <el-table-column label="直推分销用户分润总金额" prop="saleSendlBonus"></el-table-column>
      <el-table-column label="直推分销待分润金额" prop="saleWaitBonus"></el-table-column>
      <el-table-column label="平台给予额外奖励的金额" prop="additionWallet"></el-table-column>
      <el-table-column label="流入的优惠券金额" prop="additionVoucher"></el-table-column>
    </el-table>
    <el-pagination
      background
      @current-change="jump"
      layout="total, prev, pager, next, jumper"
      :pageSize=15
      :total="total">
    </el-pagination>
    <el-dialog type="text" :modal-append-to-body="false" :visible.sync="showVip" width="30%">
      <el-form>
        <el-form-item label="直推奖励总额">
          <p>{{vipData.vipAgentBonus}}</p>
        </el-form-item>
        <el-form-item label="店长奖励">
          <p>{{vipData.vipOwnerBonus}}</p>
        </el-form-item>
        <el-form-item label="boss奖励">
          <p>{{vipData.vipBossBonus}}</p>
        </el-form-item>
        <el-form-item label="店长同级奖励">
          <p>{{vipData.lvOwnerBonus}}</p>
        </el-form-item>
        <el-form-item label="boss同级奖励">
          <p>{{vipData.lvBossBonus}}</p>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog type="text" :modal-append-to-body="false" :visible.sync="showTrade" width="30%">
      <el-form>
        <el-form-item label="微信支付订单商品金额">
          <p>{{tradeData.wxPayTrade}}</p>
        </el-form-item>
        <el-form-item label="微信支付订单的运费金额">
          <p>{{tradeData.wxPayPostfee}}</p>
        </el-form-item>
        <el-form-item label="抵用券支付订单商品金额">
          <p>{{tradeData.voucherPayTrade}}</p>
        </el-form-item>
        <el-form-item label="抵用券支付订单的运费金额">
          <p>{{tradeData.voucherPayPostfee}}</p>
        </el-form-item>
        <el-form-item label="余额支付订单商品金额">
          <p>{{tradeData.walletPayTrade}}</p>
        </el-form-item>
        <el-form-item label="余额支付订单的运费金额">
          <p>{{tradeData.walletPayPostfee}}</p>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {ajax, dailyReportList, tradeReport,vipReport} from "../../data/service";

  export default {
    name: "dailyReport",
    data() {
      return {
        page: 1,
        total: 0,
        tableData: [],
        tradeData: {},//单日的订单收入数据
        showTrade:false,
        vipData:{},
        showVip:false
      }
    },
    mixins: [ajax],
    created() {
      this.loadData();
    },
    methods: {
      loadData() {
        this.doajax(dailyReportList,
          {
            page: this.page,
          },
          resp => {
            this.tableData = resp.data;
            this.total = resp.total;
          }
        );
      },
      jump(val) {
        this.page = val;
        this.loadData();
      },
      queryTradeReport(date) {
        this.doajax(tradeReport,
          {
            date: date,
          },
          resp => {
            this.tradeData = resp;
            this.showTrade = true;
          }
        );
      },
      queryVipReport(date) {
        this.doajax(vipReport,
          {
            date: date,
          },
          resp => {
            this.vipData = resp;
            this.showVip = true;
          }
        );
      },

    }
  }
</script>

<style>
</style>
